import React from 'react'
import store from './redux/store'

export default class ThisDemo extends React.Component {
    constructor() {
        super()
        this.dbincrement = this.dbincrement.bind(this)
    }
    state = { count: 0 }

    increment() {
        this.setState({
            count: this.state.count += 1 //这里必须写+=1，写++没效果
        }, () => {
            console.log(this.state.count);
        })

        console.log(this.state.count);
    }

    dbincrement(num) {
        // this.setState({
        //     count: this.state.count + num
        // })
        store.dispatch({ type: 'increment', data: num })
    }

    decrement = () => {
        this.setState({
            count: this.state.count -= 1
        })
        console.log(this.state.count);
    }

    componentDidMount() {
        store.subscribe(() => {  //reducer是不能调用render，所以要通过store身上的subscribe函数监听到store状态的变化从而更新页面！
            this.setState({})
        })
    }

    render() {
        return (
            <>
                <h3> this is this demo {store.getState()}</h3>
                <button onClick={this.increment.bind(this)}>increment</button>
                <button onClick={() => { this.dbincrement(4) }}>dbincrement</button>
                <button onClick={this.decrement}>decrement</button>
            </>
        )
    }
}